<template>
  <el-card>
    <h2>查询其他学生组织信息</h2>
    <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px;">
      <el-form-item label="组织名称">
        <el-input v-model="searchForm.orgName" placeholder="请输入组织名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-card v-if="orgInfo" style="margin-top: 20px;">
      <h3>组织信息</h3>
      <p><strong>组织ID：</strong>{{ orgInfo.orgId }}</p>
      <p><strong>组织名：</strong>{{ orgInfo.name }}</p>
      <p><strong>邮箱：</strong>{{ orgInfo.email }}</p>
      <p><strong>cAdminId：</strong>{{ orgInfo.cAdminId }}</p>
      <p><strong>bAdminId：</strong>{{ orgInfo.bAdminId }}</p>
    </el-card>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const operatorId = localStorage.getItem('loginId')
const searchForm = ref({
  orgName: ''
})
const orgInfo = ref(null)

const handleSearch = async () => {
  if (!searchForm.value.orgName) {
    ElMessage.error('请输入组织名称')
    return
  }
  try {
    const res = await axios.get(
      `http://localhost:8080/student/${operatorId}/${searchForm.value.orgName}/getOtherOrgByName`
    )
    if (res.data && res.data.code === 200 && res.data.data) {
      orgInfo.value = res.data.data
    } else {
      orgInfo.value = null
      ElMessage.error(res.data && res.data.msg ? res.data.msg : '未查询到该组织')
    }
  } catch (e) {
    orgInfo.value = null
    ElMessage.error('查询失败')
  }
}

const resetSearch = () => {
  searchForm.value.orgName = ''
  orgInfo.value = null
}
</script>